<script src=”https://unpkg.com/axios/dist/axios.min.js”></script>
<template>
  <div class="hello">
    <h1 id="aaa">{{ sites }}</h1>

    <h1 >{{ msg }}vueAJAX请求 https://blog.csdn.net/sinat_38328891/article/details/80312965
   <b></b> https://segmentfault.com/a/1190000011072725
      <b></b> Vue如何让页面加载时请求后台接口数据_wenxingchen的博客-CSDN博客https://blog.csdn.net/wenxingchen/article/details/86705667
    </h1>
    <h1 >{{ msg2 }}</h1>
    <button @click="createPerson">Create</button>
    <h2>Essential Links</h2>
    <ul>
      <li>
        <a
          href="https://vuejs.org"
          target="_blank"
        >
          Core Docs
        </a>
      </li>
      <li>
        <a
          href="https://forum.vuejs.org"
          target="_blank"
        >
          Forum
        </a>
      </li>
      <li>
        <a
          href="https://chat.vuejs.org"
          target="_blank"
        >
          Community Chat
        </a>
      </li>
      <li>
        <a
          href="https://twitter.com/vuejs"
          target="_blank"
        >
          Twitter
        </a>
      </li>
      <br>
      <li>
        <a
          href="http://vuejs-templates.github.io/webpack/"
          target="_blank"
        >
          Docs for This Template
        </a>
      </li>
    </ul>
    <h2>Ecosystem</h2>
    <ul>
      <li>
        <a
          href="http://router.vuejs.org/"
          target="_blank"
        >
          vue-router
        </a>
      </li>
      <li>
        <a
          href="http://vuex.vuejs.org/"
          target="_blank"
        >
          vuex
        </a>
      </li>
      <li>
        <a
          href="http://vue-loader.vuejs.org/"
          target="_blank"
        >
          vue-loader
        </a>
      </li>
      <li>
        <a
          href="https://github.com/vuejs/awesome-vue"
          target="_blank"
        >
          awesome-vue
        </a>
      </li>
    </ul>
  </div>
</template>

<script>

    // const axios = require('axios');
    import axios from 'axios';
    //允许cookie
    axios.defaults.withCredentials = true;
    export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: "ssss",
        msg2: "msg2msg2msg2msg2msg2"
    }
    },
        //在这里调用ajax请求方法
        created(){
            msg2:this.createPerson();
        },
    methods:{
        createPerson: function(){
            alert("msg2"+this.msg2);

            // $http.jsonp('https://sug.so.360.cn/suggest',{
            //     params:{
            //         word:'a'
            //     }
            // }).then(function(res){
            //     alert(res.data);
            // });
            //定义一个json示例
            var jsons={"userName":"admin","password":"123"};
            axios({
                header:{
                    'Content-Type':'application/json;charset=UTF-8',  //如果写成contentType会报错
                    'rpcid':'2222'  //如果写成contentType会报错
                },
                method:'post',
                url:'http://www.wsf.com/auth/login',
                data:jsons
            }).then(function(res){
                alert("loginSuccessMsg2");

                var resultStr= JSON.stringify(res);
                this.msg2 = resultStr;
                console.log(res);
            });
        }
    }

}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  h1, h2 {
    font-weight: normal;
  }
  ul {
    list-style-type: none;
    padding: 0;
  }
  li {
    display: inline-block;
    margin: 0 10px;
  }
  a {
    color: #42b983;
  }
</style>
